<template>
    <div class="back">
        <el-container>
            <el-header height="10%">
                <div class="header-div">
                    <img class="img-title" src="@/assets/img/index/title.png"/>
                    <div class="header-font">桐庐县江南镇人民政府</div>
                </div>
                <div style="width:400px;margin-top:15px;margin-right:18px">
                    <el-input v-model="search" placeholder="搜索" style="width: 380px; position: relative; padding-right: 15px;" size="small" @keyup.enter.native="doSearch">  
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="doSearch" style="position: absolute; right: 15px;"></i>  
                    </el-input>
                </div>
                <div class="user">
                    <span class="username">{{username}}</span>
                    <span><el-avatar :size="40" :src="avatar"></el-avatar></span>
                </div>
            </el-header>
            <el-container>
                <el-aside width="25%">
                    <div class="left-region">
                        <div v-show="show[0]" >
                            <!-- 个人中心的日历 -->
                            <Calendar></Calendar>
                        </div>
                        <div v-show="show[1]" style="height:100%">
                            <!-- 公交管理的统计 -->
                            <Statistics></Statistics>
                        </div>
                        <div v-show="show[2]" style="height:100%">
                            <!-- 三重一大的左边区域 -->
                            <DecReport></DecReport>
                        </div>
                        <div v-show="show[3]" style="height:100%">
                            <!-- 项目管理左边区域 -->
                            <ProItem></ProItem>
                        </div>
                        <div v-show="show[4]" style="height:100%">
                            <!-- 信访诉求左边区域 -->
                            <PetItem></PetItem>
                        </div>
                        <div v-show="show[5]" style="height:100%">
                            <!-- 农房审批左边区域 -->
                            <HouItem></HouItem>
                        </div>
                        <div v-show="show[6]" style="height:100%">
                            <!-- 人事管理左边区域 -->
                            <PeoItem></PeoItem>
                        </div>
                        <div v-show="show[7]" style="height:100%">
                            <!-- 通讯录左边区域 -->
                            <AddItem></AddItem>
                        </div>
                    </div>
                </el-aside>
                <el-main>
                    <div class="right-region">
                        <tab-bar>
                            <span class="item" @click="Jump(0)">
                                <tab-bar-item path="/index/mine">
                                    <img slot="item-icon" src="@/assets/img/tabbar/mine.png">
                                    <img slot="item-icon-active" src="@/assets/img/tabbar/mine.png">
                                    <div slot="item-text">个人中心</div>
                                </tab-bar-item>
                            </span>
                            <span class="item" @click="Jump(1)">
                                <tab-bar-item path="/index/docmanage">
                                    <img slot="item-icon" src="@/assets/img/tabbar/docmanage.png">
                                    <img slot="item-icon-active" src="@/assets/img/tabbar/docmanage.png">
                                    <div slot="item-text">公文管理</div>
                                </tab-bar-item>
                            </span>
                            <span class="item" @click="Jump(2)">
                                <tab-bar-item path="/index/important">
                                    <img slot="item-icon" src="@/assets/img/tabbar/important.png">
                                    <img slot="item-icon-active" src="@/assets/img/tabbar/important.png">
                                    <div slot="item-text">三重一大</div>
                                </tab-bar-item>
                            </span>
                            <span class="item" @click="Jump(3)">
                                <tab-bar-item path="/index/promanage">
                                    <img slot="item-icon" src="@/assets/img/tabbar/promanage.png">
                                    <img slot="item-icon-active" src="@/assets/img/tabbar/promanage.png">
                                    <div slot="item-text">项目管理</div>
                                </tab-bar-item>
                            </span>
                            <span class="item" @click="Jump(4)">
                                <tab-bar-item path="/index/petition">
                                    <img slot="item-icon" src="@/assets/img/tabbar/petition.png">
                                    <img slot="item-icon-active" src="@/assets/img/tabbar/petition.png">
                                    <div slot="item-text">信访诉求</div>
                                </tab-bar-item>
                            </span>
                            <span class="item" @click="Jump(5)">
                                <tab-bar-item path="/index/houapproval">
                                    <img slot="item-icon" src="@/assets/img/tabbar/houapproval.png">
                                    <img slot="item-icon-active" src="@/assets/img/tabbar/houapproval.png">
                                    <div slot="item-text">农房审批</div>
                                </tab-bar-item>
                            </span>
                            <span class="item" @click="Jump(6)">
                                <tab-bar-item path="/index/peomanage">
                                    <img slot="item-icon" src="@/assets/img/tabbar/peomanage.png">
                                    <img slot="item-icon-active" src="@/assets/img/tabbar/peomanage.png">
                                    <div slot="item-text">人事管理</div>
                                </tab-bar-item>
                            </span>
                            <span class="item" @click="Jump(7)">
                                <tab-bar-item path="/index/addressbook">
                                    <img slot="item-icon" src="@/assets/img/tabbar/addressbook.png">
                                    <img slot="item-icon-active" src="@/assets/img/tabbar/addressbook.png">
                                    <div slot="item-text">通讯录</div>
                                </tab-bar-item>
                            </span>
                        </tab-bar>
                        <div class="main">
                            <router-view></router-view>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import TabBar from "@/components/tabbar/TabBar"
    import TabBarItem from '@/components/tabbar/TabBarItem.vue'
    import Calendar from '@/components/business/Calendar.vue'
    import Statistics from '@/components/business/Statistics.vue'
    import DecReport from '@/components/business/DecReport.vue'
    import PeoItem from '@/components/business/PeoItem.vue'
    import PetItem from '@/components/business/PetItem.vue'
    import ProItem from '@/components/business/ProItem.vue'
    import HouItem from '@/components/business/HouItem.vue'
    import AddItem from '@/components/business/AddItem.vue'
    export default {
        name: 'Index',
        components: {
            TabBar,
            TabBarItem,
            Calendar,
            Statistics,
            DecReport,
            PeoItem,
            PetItem,
            HouItem,
            AddItem,
            ProItem
        },
        data () {
            return {
                show: [true,false,false,false,false,false,false,false],
                username: '用户名',
                avatar: '',
                search: '',  //搜索内容
            }
        },
        methods: {
            Jump(index) {
                for (let i = 0; i < this.show.length; i++) {
                    if (index === i) {
                        this.show.splice(i, 1, true)
                    }else{
                        this.show.splice(i, 1, false)
                    }
                }
            },
            //搜索框点击搜索
            doSearch(){
                console.log(this.search);
            }
        }
    }
</script>

<style scoped>
    .el-header{
        display: flex;
        margin-top: 20px;
        justify-content: space-between;
    }
    .el-aside{
        height: 92%;
        width: 100%;
        margin-left: 40px;
        padding: 5px;
        background-color: rgb(255, 255, 255);
        border-radius: 8px;
        overflow: hidden;
    }
    .el-main{
        width: 100%;
        height: 100%;
    }
    .back{
        background: url("../assets/img/background.png");
        background-size: 100% 100%;
        display: flex;
        height: 100%;
        vertical-align:top;
    }
    .left-region{
        border: 1px solid rgb(255, 255, 255);
        border-radius: 10px;
        width: 100%;
        height: 100%;
    }
    .right-region{
        margin-left: 20px;
        width: 93%;
        height: 101.5%;
    }
    .main{
        margin-top: 10px;
        height: 78%;
        border: 1px solid rgb(255, 255, 255);
        border-radius: 10px;
        background-color: white;
    }
    .img-title{
        width: 190px;
        height: 190px;
        margin-top: -45px;
        margin-left: -50px;
    }
    .header-div{
        margin-top: -20px;
        vertical-align:middle;
        display: flex;
    }
    .header-font{
        font-size: 35px;
        margin-top: 30px;
        margin-left: -50px;
        color: white;
    }
    .user *{
        font-size: 15px;
        vertical-align:middle;
        margin-top: 10px;
    }
    .user{
        margin-right: 80px;
    }
    .item{
        margin-right: 43px;
    }
</style>